<template>
  <div class="h-full w-full flex flex-col justify-between">
    <div class="grow-[1] mx-[15px] h-0 mt-[15px]">
      <el-table
        scrollbar-always-on
        v-loading="state.loading"
        :data="list"
        height="100%"
        border
        stripe
        fit
      >
        <template #empty>
          <ui-empty />
        </template>
        <el-table-column align="center" prop="Name" label="会员账号" show-overflow-tooltip />
        <el-table-column align="center" prop="Note" label="会员备注" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.Note || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Type" label="用户身份">
          <template #default="{ row }: TableItem">
            <el-button :type="userTypeMap[row.Type]?.type" size="small">
              {{ userTypeMap[row.Type]?.text || "--" }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Device" label="设备" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.Device || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="UpdatedAt" label="登录时间" width="180">
          <template #default="{ row }: TableItem">
            {{ formatDate(row.UpdatedAt) || "--" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="LoginIp"
          label="登录IP"
          width="170"
          show-overflow-tooltip
        >
          <template #default="{ row }: TableItem">
            {{ formatDate(row.LoginIp) || "--" }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-end my-[10px] mx-[15px]">
      <ui-pagination
        :total="state.total"
        v-model:pageSize="state.pageSize"
        v-model:currentPage="state.page"
        @current-change="getData"
      ></ui-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useList } from "@/hooks/useList";
import { reqUserOnlineList } from "@/api/user";
import { formatDate } from "@/utils/common";

interface TableItem {
  row: OnlineMo;
}

const userTypeMap = reactive<Record<string, TextType>>({
  1: { text: "正常用户", type: "success" },
  2: { text: "游客", type: "info" },
  3: { text: "机器人", type: "warning" },
  4: { text: "房主", type: "danger" },
  5: { text: "代理", type: "primary" }
});
const { state, list, getData } = useList<any, {}>(reqUserOnlineList, () => ({}));

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
:deep(.el-table__row) {
  cursor: pointer;
}
</style>
